<template>
  <div class="emphasis">
      <div ref="box" style="width:100%;height:240px;"></div>
      <!-- <div class="title">
        <span>{{number}}</span>
        <span><i :class="icon" :style="{color:color}"></i></span>
      </div> -->
  </div>
</template>

<script>
import echart from "echarts"
export default {
  data() {
    return {
      data: [
        {
          value: 1048, name: "搜索引擎"
          // labelLine:{show:false},label:{show:false},
          // itemStyle: {
          //   color: "yellow"
          // }
        },
        {
          value: 735, name: "直接访问"
          // labelLine:{show:false},label:{show:false},
          // itemStyle: {
          //   color: "red"
          // }
        },
        {
          value: 580, name: "邮件营销",
          labelLine: {show: false},label: {show: false}
          // itemStyle: {
          //   color: "blue"
          // }
        },
        {
          value: 484, name: "联盟广告"
          // labelLine:{show:false},label:{show:false},
          // itemStyle: {
          //   color: "green"
          // }
        },
        {
          value: 300, name: "视频广告"
          // labelLine:{show:false},label:{show:false},
          // itemStyle: {
          //   color: "#168efe"
          // }
        }
      ]
    }
  },
  props: {
    title: { // 标题
      type: String
    },
    number: { // 组件展示中间数量
      type: Number
    },
    icon: { // 图标
      type: String
    },
    color: { // 图标颜色
      type: String
    }
  },
  methods: {
    print() {
      let print = echart.init(this.$refs.box)
      let self = this
      let option = {
        legend: {
          top: "bottom",
          show: false
        },
        title: [
          {
            text: this.title,
            textStyle: {
              color: "yellow"
            }
          }
        ],
        emphasis: {
          label: {
            show: true,
            fontSize: "12",
            fontWeight: "bold",
            color: "yellow"
          }
        },
        toolbox: {
          show: false
        },
        tooltip: {
          // show: false,
          trigger: "item",
          textStyle: {
            fontSize: 12,
            color: "yellow" //设置文字颜色
          }
          // backgroundColor: "rgba(255,255,255,0.8)", //设置背景图片 rgba格式
          // color: "black",
          // borderWidth: "1", //边框宽度设置1
          // borderColor: "gray", //设置边框颜色
          // formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [
          {
            name: "重点人员占比",
            type: "pie",
            radius: [40, 60],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 0
            },
            labelLine: {
              show: false
            },
            label: {
              show: false,
              fontSize: 12,
              fontWeight: "bold",
              position: "center",
              formatter: "{d}%\n {b} "
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "12",
                fontWeight: "bold",
                color: "white"
              }
            },
            // label: {  //用于 展示 环形分支
            //   color: " #168efe",
            //   show: true
            // },
            // itemStyle: {
            //   color: "#168efe"
            // }
            data: self.data
          }
        ]
      }
      print.setOption(option)
    }
  },
  mounted() {
    this.print()
  }
}
</script>

<style lang="scss">
  .emphasis {
    margin-top: 10px;
    box-sizing: border-box;
    padding: 5px;
    position: relative;
    .title {
      position: absolute;
      color: white;
      top: 100px;
      left: 105px;
      font-size: 20px;
      text-align: center;
      width: 15%;
      span {
        display: block;
        &:hover {
          cursor: pointer;
        }
      }
    }
  }
</style>